<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" class="user">
    <br> <br>
    <input type="password" class="pwd"> 
    <br><br>
    <button>注册</button>

    <script>

        // 想要实现注册 --- 依靠用户名和密码登录

        // 1 需要数据  
        //   aa:123   bb:222  cc:333  dd:666

        const date = new Date() ;


        // 2 得到数据 --- 获取cookie 
        // 获取到的是名称和内容 
        // 得到的是一个字符串
        const cookies = document.cookie ;
        console.log(cookies);   // aa=123; bb=222; cc=333

        // 3 处理数据 把字符串变成数组
        let arr = cookies.split('; ') ;
        console.log(arr);   //  ['aa=123', 'bb=222', 'cc=333']

        // map会返回一个新的数组
        arr = arr.map( v => {
            return {
                username : v.split('=')[0] ,
                userpwd : v.split('=')[1]
            }
        })

        console.log(arr);

        
        // 点击事件

        const oBtn = document.querySelector('button');
        const oUser = document.querySelector('.user');
        const oPwd = document.querySelector('.pwd');

        oBtn.onclick = function() {
            // 获取用户名和密码
            const uname = oUser.value ;
            const upwd = oPwd.value ;

            // 验证用户名密码

            // 非空验证
            if(uname && upwd) {

                // 判断用户名是否存在 --- 用户名是唯一的
                const res = arr.some( v => v.username === uname) ;
                if(res) {
                    alert("用户名已被注册") ;
                } else {
                    alert('注册成功') ;
                    // 把数据存入cookie
                    document.cookie = `${uname}=${upwd};path=/;expires=` + date ;
                    // 
                    location.href = './09_login.html' ;
                }

            } 
        }

       

      

    </script>
    
</body>
</html>